<template>
  <div
    class="bg"
    :style="{
      'background-image': 'url(' + require('@/assets/loginBg.jpg') + ')',
    }"
  >
    <el-row type="flex" justify="center" class="login-contant">
      <el-col :lg="12" :xl="12">
        
        <div
          v-loading="loading"
          element-loading-text="警录中..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0,0,0, 0.6)"
          class="login-container"
        >
          <el-form
            ref="loginForm"
            :model="loginForm"
            :rules="loginRules"
            class="login-form"
          >
            <div class="title-container">
              <h3 class="title">登录</h3>
            </div>
            <el-form-item prop="username">
              <el-input
                ref="username"
                @input="inputChange"
                v-model="loginForm.username"
                prefix-icon="el-icon-user"
                placeholder="请输入登录名"
                name="username"
                type="text"
              />
            </el-form-item>

            <el-form-item prop="password" required>
              <el-input
                @input="inputChange"
                :key="passwordType"
                prefix-icon="el-icon-lock"
                ref="password"
                v-model="loginForm.password"
                :type="passwordType"
                placeholder="请输入登录密码"
                name="password"
              ></el-input>
            </el-form-item>
            <div>
              <el-button
                type="primary"
                style="width: 100%"
                @click.native.prevent="handleLogin"
              >
                登录</el-button
              >
            </div>
          </el-form>
          <el-button @click="forgotPassword" type="text">忘记密码</el-button>
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <password-change></password-change>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
import passwordChange from '../view/PasswordChange'
// import JsCookie from "js-cookie";
import router from "@/router";
export default {
  components: {
    passwordChange
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error("用户名不能为空!"));
      } else {
        callback();
      }
    };

    return {
      dialogVisible: false,
      loginForm: {
        username: "",
        password: "",
      },
      //登录规则
      loginRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername },
        ],
        password: [
          {
            validator: (rule, value, callback) =>
              this.validatePassword(rule, value, callback),
          },
        ],
      },
      loading: false,
      passwordType: "password",
    };
  },
  methods: {
    forgotPassword() {
      if (!this.loginForm.username) {
        this.$message.success("请输入手机号码");
        return
      }
      this.dialogVisible = true
    },
    inputChange() {
      this.$refs.slideRef.reset();
    },
    validatePassword(rule, value, callback) {
      if (!value) {
        callback(new Error("密码不能为空!"));
      } else {
        callback();
      }
    },
    // 录
    handleLogin() {
      const { password, username } = this.loginForm;
      const params = {
        password,
        username,
      };
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$post("/customer/login", params)
            .then((res) => {
              if (res && res.code * 1 === 200) {

                router.push("/");
                this.syncuserInfo(res.data);
                this.$message.success("登录成功");
              }
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },
    hideNumber(number) {
      return number.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
    },
    syncuserInfo(token) {
      localStorage.setItem("username", this.hideNumber(this.username));
      localStorage.setItem("token", token);
    },
  },
};
</script>
<style lang="less" scoped>
.login-contant {
  width: 70%;
  padding-top: 8%;
  height: 100%;
  margin: auto;
}
.login-container {
  height: 400px;
  width: 380px;
  overflow: hidden;
  // background: ur1(-@/assets/bgo.jpg);
  background-size: 100% 100%;
  box-shadow: 0px 2px 14px 0px rgb(9 15 102 / 30%);
  border-radius: 4px;
  margin: auto;
  .login-form {
    position: relative;
    padding: 20px 50px 0;
    margin: 0 auto;
    overflow: hidden;
  }
  .tips {
    font-size: 12px;
    color: #000;
  }
  .title-container {
    position: relative;
    margin-top: 40px;
    .title {
      font-size: 24px;
      color: rgb(75, 75, 75);
      margin: Opx auto 20px auto;
      text-align: center;
      font-weight: 500;
    }
  }
  show-pwd {
    position: absolute;
    right: 10px;
    top: 2px;
    font-size: 16px;
    color: #889aa4;
    cursor: pointer;
    user-select: none;
  }
}
.bg {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
</style>
